// /* eslint-disable indent */
import React from 'react';

import TyTimePicker from '@ray-js/components-ty-time-picker';
import { View } from '@ray-js/ray';
import _ from 'lodash';
import { useSystemInfo } from '@/hooks/useSystemInfo';
import Strings from '../../i18n';
import styles from './index.module.less';

const height = '40';

const pickerBorderBg = '#000';

export default function AddSchedule({ time, handlePickerChange }) {
  const { is24Hour: is24H } = useSystemInfo();

  return (
    <View className={styles.pickerContainer}>
      <TyTimePicker
        className="c-ty-time-picker"
        style={{
          opacity: 1,
        }}
        fontColor="#000"
        overlayStyle={{
          opacity: 0,
        }}
        unitAlign="right"
        indicatorStyle={{
          height: `${height}px`,
          borderTop: '2rpx solid '.concat(pickerBorderBg),
          borderBottom: '2rpx solid '.concat(pickerBorderBg),
        }}
        columnWrapStyle={{
          height: `${height}px`,
          lineHeight: `${height}px`,
        }}
        fontSize={30}
        fontStyle={{
          fontWeight: 700,
        }}
        is24Hour={is24H}
        value={time}
        onChange={handlePickerChange}
        amText={Strings.getLang('AM')}
        pmText={Strings.getLang('PM')}
      />
    </View>
  );
}
